<!-- 简单生产退库 -->
<template>
  <div class="content">
    <div class="content-head">
      <el-form :inline="true" :model="formData" label-position="left" size="mini">
        <el-form-item label="退库单号" label-width="70px" class="form-item">
          <el-input v-model="formData.orderNumber" placeholder="请输入退库单号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" icon="el-icon-refresh-left" @click="reset">重置</el-button>
          <el-button type="success" size="mini" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content-table">
      <el-table :data="tableData" v-loading="tableLoading" style="width: 100%;" :max-height="tableMaxHeight">
        <el-table-column type="index" label="序号" width="50" ></el-table-column>
        <el-table-column prop="orderNumber" label="退库单号" width="150"></el-table-column>
        <el-table-column  prop="createTime" label="日期" width="150"></el-table-column>
        <el-table-column prop="approvalStatusName" label="单据状态" align="center" width="">
          <template slot-scope="{row, $index}">
            <span>{{ row.approvalStatusName.includes('已审批') ? '完成' : '生效' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="materialFields.code" label="物料编码" align="" width=""></el-table-column>
        <el-table-column prop="materialFields.name" label="物料名称" width=""></el-table-column>
        <el-table-column prop="materialFields.standard" label="规格名称" align="center" width=""> </el-table-column>
        <el-table-column prop="inOrOutTypeName" label="入库类型" align="center" width=""></el-table-column>
        <el-table-column prop="materialFields.comp" label="单位" align="center" width=""></el-table-column>
        <el-table-column prop="planAmount" label="应收数量" align="center" width=""></el-table-column>
        <el-table-column prop="actualAmount" label="实收数量" align="center" width=""></el-table-column>
        <el-table-column prop="warehouseName" label="仓库" align="center" width=""></el-table-column>
        <el-table-column prop="" label="仓位" align="center" width=""></el-table-column>
        <el-table-column prop="" label="批号" align="center" width=""></el-table-column>
        <el-table-column prop="" label="生产车间" align="center" width=""></el-table-column>
        <el-table-column prop="" label="班组" align="center" width=""></el-table-column>
        <el-table-column prop="" label="生产编号" align="center" width=""></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="detail(scope.row)" type="text" size="small">详情</el-button>
            <!-- <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="content-footer">
      <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,40,80,100,200]" :page-size="pageSize" background layout="prev, pager, next,total, sizes, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>
  
  <script>
  import { portrait, autoOrientation, fullscreen } from "@/utils/rotatingScreen.js";
  import { loadListapi } from "@/api/ProductionReturnInventory";
  import TableHeadFilter from "@/components/tableHeadFilter/index.vue";
  export default {
    name:"ProductionReturnInventory",  //简单生产退库
    components:{
      TableHeadFilter
    },
    data() {
      return {
        formData:{
          orderNumber:""
        },
        tableData:[],
        currentPage:1,
        pageSize:10,
        total:0,
        tableLoading:false,
        tableMaxHeight:450
      }
    },
    mounted(){
      //精致环境下进行自动旋转
      //autoOrientation();
      this.loadlist()
      this.calculateTableMaxHeight();
      window.addEventListener("resize",this.calculateTableMaxHeight);
      document.title = "简单生产退库";
    },
    beforeDestroy(){
      window.removeEventListener("resize",this.calculateTableMaxHeight);
    },
    methods:{
      //分页器
      handleCurrentChange(curPage){
        this.currentPage = curPage;
        this.loadlist();
      },
      handleSizeChange(pageSize){
        this.pageSize = pageSize;
        this.loadlist();
      },
      calculateTableMaxHeight(){
        const dom = document.querySelector(".content-table");
        this.$nextTick(() => {
          this.tableMaxHeight = dom.offsetHeight - 10;
        })
      },
      //重置
      reset(){
        this.formData.orderNumber = "";
        this.loadlist();
      },
      //查询
      search(){
        const searchStr = this.formData.orderNumber;
        if(!searchStr){
          this.$message({type:"warning",message:"请输入退库单号后查询"});
          return;
        }
        this.loadlist();
      },
      loadlist(){
        const { orderNumber } = this.formData;
        const parameter = {current:this.currentPage,size:this.pageSize,orderNumber};
        // const parameter = {current:this.currentPage,size:this.pageSize};
        this.tableLoading = true;
        loadListapi(parameter).then(res => {
          // console.log(res.data);
          if(res.data.code === 200 && res.data.data){
            this.tableData = res.data.data.content;
            this.total = res.data.data.totalElements;
          }
          console.log('获取简单生产退库',res);
          this.tableLoading = false;
        },error => {
          this.$message({type:"error",message:"获取简单生产退库请求失败"});
          this.tableLoading = false;
          console.log('获取简单生产退库',error);
        })
      },
      detail(row){
        this.$router.push({name: "ProRetInveDetail",params:{row:row,type:'detail'}});
      },
      edit(row){
        this.$router.push({name: "ProRetInveDetail",params:{row:row,type:'edit'}});
      }
    }
  }
  </script>
  
<style lang='scss' scoped>
.content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1%;
  box-sizing: border-box;

  .content-head{
    flex: 0.5;
    .form-item{
      margin-right: 2vw;
    }
  }
  .content-table{
    flex: 9;
    margin: 10px 0;
    .table-date{
      width: 100%;
      height: 2%;
      min-height: 15px;
      margin-bottom: 0.5%;
      display: flex;
      justify-content: right;
    }
    .table-main{
      width: 100%;
      height: 98%;
    }
  }
  .content-footer{
    flex: 0.5;
    display: flex;
    justify-content: flex-end;
  }
}
::v-deep .el-table__header th {
  padding: 0; /* 调整上下内边距 */
}
::v-deep .el-table__row {
  margin-bottom: 15px; /* 调整这个值来改变行间距 */
  height: 60px;
}
::v-deep .el-table .el-table__cell{
  padding: 0;
}

</style>